<template>
  <AppHeader :title="moduleTypeName" :banAnimate="true" backgroundColor="#ffffff">
    <template #left>
      <img
        @click="onClickLeft"
        src="@/assets/images/icon-back-black.png"
        width="9"
        height="18"
      />
    </template>
    <template #right>
      <img
        @click="onClickRight"
        src="@/assets/images/listening/copy.png"
        width="18"
        height="18"
      />
    </template>
  </AppHeader>
  <div class="container">
    <div class="top">
      {{moduleTypeName}}
    </div>
    <div class="handleft" @click="onClickRight">
      <img
        src="@/assets/images/written/handleft.png"
        width="100"
        height="100"
      />
    </div>
  </div>
</template>

<script setup>
import AppHeader from "@/components/AppHeader.vue";
import { useRouter,useRoute } from "vue-router";
import {onMounted, ref} from 'vue'
const router = useRouter();
const route = useRoute();

const onClickLeft = () => {
  router.back();
};
const moduleTypeName = ref('')
onMounted(()=>{
  moduleTypeName.value = JSON.parse(sessionStorage.getItem('resource')).parts.find(item=>item.sid == route.query.sid).module_type_name
})
const onClickRight = () => { 
  router.push({
    path: "/writtenTest/clozeTest",
    query: { sid: route.query.sid },
  });
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  background-color: #ffffff;
  padding-top: 44px;
  overflow: scroll;
  .top{
  font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 16px;
color: #333333;
line-height: 22px;
text-align: left;
font-style: normal;
padding: 15px 10px;
 }
 .handleft{
  position: absolute;
  right: 14px;
  top: 50%;
  cursor: pointer;
 }
}
</style>
